<!--
 * @Author: 计都 3038199036@qq.com
 * @Date: 2024-09-19 16:09:51
 * @LastEditors: 计都 3038199036@qq.com
 * @LastEditTime: 2024-09-21 14:35:55
 * @FilePath: \vuePDF\src\views\homepage.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div style="position: relative;width: 100%;height:100% ;top: 0;left: 0;">
        <div class="container">
            <div class="terminal_toolbar">
                <div class="butt">
                    <button class="btn btn-color" @click="$router.push('/home')"></button>
                    <button class="btn"></button>
                    <button class="btn"></button>
                </div>
                <p class="user">RoadsterKayyer@admin: ~</p>
                <div class="add_tab">
                    +
                </div>
            </div>
            <div class="terminal_body">
                <div class="terminal_promt">
                    <span class="terminal_user">RoadsterKayyer@admin:</span>
                    <span class="terminal_location">~</span>
                    <span class="terminal_bling">$</span>
                    <span class="terminal_bling"><span id="inputDiv"></span><span class="terminal_cursor"></span></span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            Scrollnum: 0,
            textToInsert: "apt-get update \nHit:1 http://mirrors.cloud.aliyuncs.com/ubuntu jammy InRelease\nGet:2 http://mirrors.cloud.aliyuncs.com/ubuntu jammy-updates InRelease [128 kB]\nHit:3 http://mirrors.cloud.aliyuncs.com/ubuntu jammy-backports InRelease\nGet:4 http://mirrors.cloud.aliyuncs.com/ubuntu jammy-security InRelease [129 kB]\nGet:5 http://mirrors.cloud.aliyuncs.com/ubuntu jammy-updates/main amd64 Packages [2,058 kB]\nGet:6 http://mirrors.cloud.aliyuncs.com/ubuntu jammy-updates/universe amd64 Packages [1,124 kB]\nFetched 3,439 kB in 1s (3,344 kB/s)\nReading package lists... Done\n..............\n apt-get upgrade\nReading package lists... Done\nBuilding dependency tree... Done\nReading state information... Done\nCalculating upgrade... Done\nThe following packages have been kept backn\napparmor cloud-init libapparmor1The following packages will be upgraded:\napt apt-utils base-files libapt-pkg6.0 motd-news-config python-apt-common python3-apt python3-distupgrade python3-update-manager shim-signed ubuntu-drivers-common\nubuntu-release-upgrader-core update-manager-coro\n13 upgraded, 0 newly installed, 0 to remove and 3 not upgraded.\nNeed to get 3,641 kB of archives.\nAfter this operation, 28.7 kB of additional disk space will be used.\nDo you want to continue? [Y/n] y\nGet:1 http://mirrors.cloud.aliyuncs.com/ubuntu jammy-updates/main amd64 motd-news-config all 12ubuntu4.7 [3,822 B]\nGet:2 http://mirrors.cloud.aliyuncs.com/ubuntu jammy-updates/main amd64 base-files amd64 12ubuntu4.7 [61.9 kB]\nGet:3 http://mirrors.cloud.aliyuncs.com/ubuntu jammy-updates/main amd64 libapt-pkg6.0 amd64 2.4.13 [912 kB]\nGet:4 http://mirrors.cloud.aliyuncs.com/ubuntu jammy-updates/main amd64 apt amd64 2.4.13 [1,363 kB]\nGet:5 http://mirrors.cloud.aliyuncs.com/ubuntu jammy-updates/main amd64 apt-utils amd64 2.4.13 [211 kB]\nGet:6 http://mirrors.cloud.aliyuncs.com/ubuntu jammy-updates/main amd64 python-apt-common all 2.4.0ubuntu4 [14.6 kB]\nGet:7 http://mirrors.cloud.aliyuncs.com/ubuntu jammy-updates/main amd64 python3-apt amd64 2.4.0ubuntu4 [164 kB]\nGet:8 http://mirrors.cloud.aliyuncs.com/ubuntu jammy-updates/main amd64 ubuntu-drivers-common amd64 1:0.9.6.2~0.22.04.7 [59.0 kB]\nGet:9 http://mirrors.cloud.aliyuncs.com/ubuntu jammy-updates/main amd64 ubuntu-release-upgrader-core all 1:22.04.20 [26.2 kB]\nGet:10 http://mirrors.cloud.aliyuncs.com/ubuntu jammy-updates/main amd64 python3-distupgrade all 1:22.04.20 [106 kB]\nGet:11 http://mirrors.cloud.aliyuncs.com/ubuntu jammy-updates/main amd64 python3-update-manager all 1:22.04.21 [39.1 kB]\nGet:12 http://mirrors.cloud.aliyuncs.com/ubuntu jammy-updates/main amd64 update-manager-core all 1:22.04.21 [11.5 kB]\nGet:13 http://mirrors.cloud.aliyuncs.com/ubuntu jammy-updates/main amd64 shim-signed amd64 1.51.4+15.8-0ubuntu1 [668 kB]\nFetched 3,641 kB in 0s (25.5 MB/s)               \nPreconfiguring packages ...\n(Reading database ... 116761 files and directories currently installed.)\nPreparing to unpack .../motd-news-config_12ubuntu4.7_all.deb ...\nUnpacking motd-news-config (12ubuntu4.7) over (12ubuntu4.6) ...\nPreparing to unpack .../base-files_12ubuntu4.7_amd64.deb ...\nUnpacking base-files (12ubuntu4.7) over (12ubuntu4.6) ...\nSetting up base-files (12ubuntu4.7) ...\nInstalling new version of config file /etc/issue ...\nInstalling new version of config file /etc/issue.net ...\nInstalling new version of config file /etc/lsb-release ...\nmotd-news.service is a disabled or a static unit not running, not starting it.\n(Reading database ... 116761 files and directories currently installed.)\nPreparing to unpack .../libapt-pkg6.0_2.4.13_amd64.deb ...\nUnpacking libapt-pkg6.0:amd64 (2.4.13) over (2.4.12) ...\nSetting up libapt-pkg6.0:amd64 (2.4.13) ...\n(Reading database ... 116761 files and directories currently installed.)\nPreparing to unpack .../archives/apt_2.4.13_amd64.deb ...\nUnpacking apt (2.4.13) over (2.4.12) ...\nSetting up apt (2.4.13) ...\n(Reading database ... 116761 files and directories currently installed.)\nPreparing to unpack .../0-apt-utils_2.4.13_amd64.deb ...\nUnpacking apt-utils (2.4.13) over (2.4.12) ...\nPreparing to unpack .../1-python-apt-common_2.4.0ubuntu4_all.deb ...\nUnpacking python-apt-common (2.4.0ubuntu4) over (2.4.0ubuntu3) ...\nPreparing to unpack .../2-python3-apt_2.4.0ubuntu4_amd64.deb ...\nUnpacking python3-apt (2.4.0ubuntu4) over (2.4.0ubuntu3) ...\nPreparing to unpack .../3-ubuntu-drivers-common_1%3a0.9.6.2~0.22.04.7_amd64.deb ...\nUnpacking ubuntu-drivers-common (1:0.9.6.2~0.22.04.7) over (1:0.9.6.2~0.22.04.6) ...\nPreparing to unpack .../4-ubuntu-release-upgrader-core_1%3a22.04.20_all.deb ...\nUnpacking ubuntu-release-upgrader-core (1:22.04.20) over (1:22.04.19) ...\nPreparing to unpack .../5-python3-distupgrade_1%3a22.04.20_all.deb ...\nUnpacking python3-distupgrade (1:22.04.20) over (1:22.04.19) ...\nPreparing to unpack .../6-python3-update-manager_1%3a22.04.21_all.deb ...\nUnpacking python3-update-manager (1:22.04.21) over (1:22.04.9) ...\nPreparing to unpack .../7-update-manager-core_1%3a22.04.21_all.deb ...\nUnpacking update-manager-core (1:22.04.21) over (1:22.04.9) ...\nPreparing to unpack .../8-shim-signed_1.51.4+15.8-0ubuntu1_amd64.deb ...\nUnpacking shim-signed (1.51.4+15.8-0ubuntu1) over (1.51.3+15.7-0ubuntu1) ...\nSetting up motd-news-config (12ubuntu4.7) ...\nSetting up apt-utils (2.4.13) ...\nSetting up shim-signed (1.51.4+15.8-0ubuntu1) ...\nInstalling grub to /boot/efi.\nInstalling for x86_64-efi platform.\nInstallation finished. No error reported.\nSetting up python-apt-common (2.4.0ubuntu4) ...\nSetting up python3-apt (2.4.0ubuntu4) ...\nSetting up ubuntu-drivers-common (1:0.9.6.2~0.22.04.7) ...\nSetting up python3-update-manager (1:22.04.21) ...\nSetting up python3-distupgrade (1:22.04.20) ...\nSetting up ubuntu-release-upgrader-core (1:22.04.20) ...\nSetting up update-manager-core (1:22.04.21) ...\nProcessing triggers for install-info (6.8-4build1) ...\nProcessing triggers for libc-bin (2.35-0ubuntu3.8) ...\nProcessing triggers for man-db (2.10.2-1) ...\nProcessing triggers for plymouth-theme-ubuntu-text (0.9.5+git20211018-1ubuntu3) ...\nupdate-initramfs: deferring update (trigger activated)\nProcessing triggers for initramfs-tools (0.140ubuntu13.4) ...\nupdate-initramfs: Generating /boot/initrd.img-5.15.0-117-generic",
        }
    },
    watch: {
        Scrollnum(newVal, oldVal) {
            // newVal是新值，oldVal是旧值
            this.handleScroll();
        }
    },
    methods: {
        insertTextIntoDiv(text) {
            let div = document.getElementById('inputDiv');
            let index = 0;
            var timer = setInterval(() => {
                if (index < text.length) {
                    div.innerHTML += text[index];
                    index++;
                    this.Scrollnum++;
                } else {
                    clearInterval(timer);
                }
            }, 0);
        },
        handleScroll() {
            // 获取元素
            var ScrollDistance = document.getElementById('inputDiv').offsetHeight;
            // console.log(ScrollDistance + "子元素距离边界");
            let parent = document.querySelector('.terminal_promt');
            let scrollnum = ScrollDistance;
            // parent.scrollTop = scrollnum;
            parent.scrollTo({
                top: scrollnum,
                behavior: 'smooth'
            });
        },
    },
    mounted() {
        this.insertTextIntoDiv(this.textToInsert);
    },
    beforeDestroy() {
        this.insertTextIntoDiv("");
    },
    beforeRouteLeave(to, from, next) {
        // console.log("准备离开路由执行")
        next(
            // console.log("离开路由之后执行"),
        );
    }
}

</script>

<style lang="css" scoped>
/* From Uiverse.io by Kemboi-Dun */
.container {
    position: absolute;
    top: 10px;
    left: 10px;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
}

.terminal_toolbar {
    display: flex;
    height: 30px;
    align-items: center;
    padding: 0 8px;
    box-sizing: border-box;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background: #212121;
    justify-content: space-between;
}

.butt {
    display: flex;
    align-items: center;
}

.btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin-right: 5px;
    font-size: 8px;
    height: 12px;
    width: 12px;
    box-sizing: border-box;
    border: none;
    border-radius: 100%;
    background: linear-gradient(#7d7871 0%, #595953 100%);
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.2);
    box-shadow: 0px 0px 1px 0px #41403A, 0px 1px 1px 0px #474642;
}

.btn-color {
    background: #ee411a;
}

.btn:hover {
    cursor: pointer;
}

.btn:focus {
    outline: none;
}

.butt--exit {
    background: linear-gradient(#f37458 0%, #de4c12 100%);
}

.add_tab {
    border: 1px solid #fff;
    color: #fff;
    padding: 0 6px;
    border-radius: 4px 4px 0 0;
    border-bottom: none;
    cursor: pointer;
}

.user {
    color: #d5d0ce;
    margin-left: 6px;
    font-size: 14px;
    line-height: 15px;
}

.terminal_body {
    background: rgba(0, 0, 0, 0.6);
    height: calc(100% - 30px);
    padding-top: 2px;
    margin-top: -1px;
    font-size: 12px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.terminal_promt {
    display: flex;
    height: 100%;
    overflow: scroll;
    scrollbar-width: none;
    /* firefox */
    -ms-overflow-style: none;
    /* IE 10+ */
}

.terminal_promt::-webkit-scrollbar {
    display: none;
    /* Chrome Safari */
}

.terminal_promt span {
    margin-left: 4px;
}

.terminal_user {
    color: #1eff8e;
}

.terminal_location {
    color: #4878c0;
}

#inputDiv {
    color: #dddddd;
    white-space: pre-wrap;
    text-align: left;
}

.terminal_bling {
    color: #dddddd;
    text-align: left;
}

.terminal_cursor {
    display: inline-block;
    height: 12px;
    width: 5px;
    margin-left: 5px;
    animation: curbl 1200ms linear infinite;
}

@keyframes curbl {

    0% {
        background: #ffffff;
    }

    49% {
        background: #ffffff;
    }

    60% {
        background: transparent;
    }

    99% {
        background: transparent;
    }

    100% {
        background: #ffffff;
    }
}
</style>